<template>
  <chartTemplate ref="chartTemplate" :option="option"></chartTemplate>
</template>
<script>
import { mapState } from 'vuex'
import chartTemplate from '@/assets/js/common/chartTemplatePlugin/chartTemplate'
export default {
  name: 'homeLeftCenter',
  data() {
    return {
      yAxis: [],
      seriesData: [],
      legend: [],
      barColor: [
        ['rgba(9,109,217,1)', 'rgba(9,109,217,0)'],
        ['rgba(217,92,9,1)', 'rgba(217,92,9,0)']
      ],
      lineColor: ['#24dcf7', '#d95c09']
    }
  },
  props: {
    params: {
      type: Object,
      default: () => {}
    },
    tooltipPos: {
      type: Number,
      default: 23
    }
  },
  mounted() {},
  computed: {
    ...mapState(['dataSet']),
    option() {
      let option = this.getOption()
      return option
    },
    xData() {
      return this.params.xData || []
    }
  },
  watch: {
    params: {
      handler: function (v, v1) {
        this.init()
      }
    }
  },
  methods: {
    init() {
      this.handleData()
      let tl = new TimelineMax({})
      tl.addLabel('start').add(this.$refs.chartTemplate.init(), 'start')
      return tl
    },
    getOption() {
      let option = {
        tooltip: {
          backgroundColor: 'rgba(17,95,234,0)',
          trigger: 'axis',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(17,95,234,0)'
            }
          },
          className: 'barline-hover-bg',
          position: (point, params, dom, rect, size) => {
            return [point[0], this.tooltipPos || 23]
          },
          formatter: (params) => {
            let unit = '',
              value = 0,
              dom = ''
            dom = `
              <div style='padding: 5px 0 0 20px;'>${params[0].name}${this.params.xUnit}</div>`
            for (let i = 0; i < params.length; i++) {
              if (params[i].seriesType == 'bar') {
                unit = this.params.barData.unit
                value = this.fomatterNum(params[i].value - 0)
              } else {
                unit = this.params.lineData.unit
                value = params[i].value - 0
                if (value > 0) {
                  value = this.fomatterNum(value.toFixed(2) - 0)
                } else {
                  value = Math.abs(value).toFixed(2) - 0
                  value = -this.fomatterNum(value)
                }
              }
              dom += `<div class="H_Regular"  style='padding-left: 20px;line-height: 20px;margin-top: 3px; '>${params[i].seriesName}</div> <div  style='padding-left: 20px;line-height: 20px;font-size: 16px;'><span style="margin-right: 3px; font-family: 'D-DIN-Bold';">${value}</span>${unit}</div>`
            }
            return dom
          }
        },
        grid: {
          bottom: 30
        },
        legend: {
          right: 0,
          top: 20,
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: '#f0f0f0'
          },
          data: this.legend
        },
        xAxis: {
          type: 'category',
          name: this.params.xUnit,
          position: 'end',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#4d5b97',
              width: 1
            }
          },
          axisTick: { show: false },
          axisLabel: { color: '#f0f0f0' },
          nameTextStyle: {
            color: '#f0f0f0',
            width: 30,
            height: 30,
            align: 'right',
            padding: [8, 10, 20, 0],
            verticalAlign: 'top'
          },
          data: this.xData
        },
        yAxis: this.yAxis,
        series: this.seriesData
      }
      return option
    },
    handleData() {
      let arr = this.params
      let [yAxis, series, legend] = [[], [], []]

      if (arr.barData && arr.barData.data.length) {
        // 获取yAxis
        yAxis.push({
          type: 'value',
          name: arr.barData.unit,
          nameTextStyle: {
            color: 'rgba(240,240, 240, .7)',
            width: 20,
            align: 'right',
            padding: [0, 20, 0, 0]
          },
          axisLine: {
            show: false
          },
          axisTick: { show: false },
          axisLabel: {
            fontSize: 12,
            color: 'rgba(240,240, 240, .7)'
          },
          splitLine: {
            show: false
          },
          splitNumber: 5
        })
        let barArr = arr.barData.data
        for (let i = 0; i < barArr.length; i++) {
          series.push({
            name: barArr[i].name,
            type: 'bar',
            barMaxWidth: '60%',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: this.barColor[i][0] },
                { offset: 1, color: this.barColor[i][1] }
              ])
            },
            data: barArr[i].data
          })
          legend.push({
            name: barArr[i].name,
            icon: 'rect',
            itemStyle: { color: this.barColor[i][0] }
          })
        }
      }
      if (arr.lineData && arr.lineData.data.length) {
        yAxis.push({
          type: 'value',
          axisLine: {
            show: false
          },
          // max: 100,
          axisTick: { show: false },
          axisLabel: {
            formatter: function (value, index) {
              return value + arr.lineData.unit
            },
            fontSize: 12,
            color: 'rgba(240,240, 240, .7)'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,225,255,.2)'
            }
          },
          splitNumber: 5
        })
        let lineArr = arr.lineData.data
        for (let i = 0; i < lineArr.length; i++) {
          legend.push(lineArr[i].name)
          series.push({
            name: lineArr[i].name,
            type: 'line',
            symbolSize: 8,
            symbol: 'circle',
            lineStyle: {
              color: this.lineColor[i]
            },
            yAxisIndex: 1,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2,
              color: this.lineColor[i]
            },
            data: lineArr[i].data
          })
        }
      }
      this.yAxis = yAxis
      this.seriesData = series
      this.legend = legend
    },
    fomatterNum(num) {
      if (typeof num === 'number') {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      } else {
        return '-'
      }
    }
  },
  components: { chartTemplate }
}
</script>
<style lang="scss">
.barline-hover-bg {
  position: absolute;
  width: 89px;
  height: 220px;
  background: url('../../assets/imgs/project-img/line/hover-bg.png') no-repeat;
  background-size: contain;
  display: none;
  border: 0 none;
  box-shadow: rgb(0 0 0 / 0%) 1px 2px 10px !important;
}
</style>
